<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书类型页面</title>

<script type="text/javascript" src="../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../jquery/echarts.common.min.js"></script>
<script type="text/javascript">
	$(function() {
		var dom = document.getElementById("first");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		option = {
			title : {
				text : '图书销售量',
				subtext : '',
				x : 'center'
			},
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c} ({d}%)"
			},
			legend : {
				orient : 'vertical',
				x : 'left',
				data : []
			},
			toolbox : {
				show : true,
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					magicType : {
						show : true,
						type : [ 'pie', 'funnel' ],
						option : {
							funnel : {
								x : '25%',
								width : '50%',
								funnelAlign : 'left',
								max : 1548
							}
						}
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			series : [ {
				name : '',
				type : 'pie',
				radius : '55%',
				center : [ '50%', '60%' ],
				data : []
			} ]
		};
		;
		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
		//饼图动态赋值  
		var year = $("#year-search").val();
		var mouth = $("#mouth-search").val();
		$.ajax({
			type : "post",
			url : "../findAnalyseMarketInfo",
			cache : false, //禁用缓存  
			dataType : "json",
			success : function(result) {
				var names = [];//定义两个数组  
				var nums = [];
				$.each(result, function(key, values) { //此处我返回的是list<String,map<String,String>>循环map  
					names.push(values.bName);
					var obj = new Object();
					obj.name = values.bName;
					obj.value = values.quantity;
					nums.push(obj);
				});
				myChart.setOption({ //加载数据图表  
					legend : {
						data : names
					},
					series : {
						// 根据名字对应到相应的系列  
						name : [ '数量' ],
						data : nums
					}
				});
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert("查询失败");
			}
		});
	})
</script>
</head>
<body>
	<div id="first" style="width: 600px; height: 400px;"></div>
</body>
</html>